<template>
  <div class="tags-container">
    <el-card shadow="never">
      <div slot="header" class="clearfix" v-if="$route.query.name">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 搜索顶部 -->
      <el-form
        ref=""
        :inline="true"
        :model="requestParameters"
        label-width="100px"
        size="small"
        class="randomForm"
      >
        <!-- 左侧 -->
        <div class="filter-container">
          <el-form-item label="标签名称：">
            <el-input
              size="small"
              v-model="requestParameters.tagName"
              style="width: 210px"
            ></el-input>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item label="状态：" prop="state">
            <el-select
              class="filter-item"
              style="width: 210px; height: 32px"
              v-model="requestParameters.state"
            >
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <!-- 按钮 -->
          <el-button size="small" type="primary" @click="clean">清除</el-button>
          <el-button size="small" type="primary" @click="seek">搜索</el-button>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <el-button
            v-if="$route.query.id"
            @click="getBackSubject"
            type="text"
            icon="el-icon-back"
            >返回学科</el-button
          >
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="adduser({})"
            >新增用户</el-button
          >
        </div>
      </el-form>

      <!-- 提示 -->
      <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tagList" style="margin: 15px 0">
        <el-table-column label="序号" prop="id"> </el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column label="标签名称" prop="tagName"> </el-table-column>
        <el-table-column label="创建者" prop="username"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">已启用</span>
            <span v-else>已禁用</span>
            <!-- <span> {{ scope.row.state === 1 ? '已启用' : '已禁用' }} </span> -->
          </template>
        </el-table-column>
        <!-- 操作按钮 -->
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editState(scope.row)">
              {{ scope.row.state === 1 ? '禁用' : '启用' }}
            </el-button>

            <el-button
              size="small"
              type="text"
              :disabled="scope.row.state === 1 ? false : true"
              @click="handleChange(scope.row.id)"
              >修改</el-button
            >
            <el-button
              size="small"
              type="text"
              :disabled="scope.row.state === 1 ? false : true"
              @click="removeUser(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          style="text-align: right"
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="requestParameters.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="requestParameters.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- 新增 -->
      <tags-add ref="TagsAdd" @finish="finish" :TagData="TagData"></tags-add>
    </el-card>
  </div>
</template>

<script>
import { list as lists, changeState, remove } from '@/api/hmmm/tags'
import TagsAdd from '../components/tags-add'

export default {
  name: 'Tags',
  components: {
    // Dialog,
    TagsAdd
  },
  data() {
    return {
      tagList: [], // 列表
      total: 0, // 总数
      TagData: [],
      // 传给子组件的数据
      requestParameters: {
        page: 1,
        pagesize: 10,
        state: null, // 状态
        // subjectID: this.$router.query.id,
        // 学科id
        tagName: null
        // 标签名称
      }
    }
  },
  created() {
    this.getList()
  },
  watch: {
    // 监听学科id
    '$route.query.id': function() {
      this.reqParams.subjectID = this.$route.query.id || null
      this.getList()
    }
  },
  methods: {
    // 分页
    handleCurrentChange(currentPage) {
      this.requestParameters.page = currentPage
      this.getList()
    },
    handleSizeChange(currentSize) {
      // 每次改变每页条数都需要把当前页赋值为第一页
      this.requestParameters.page = 1
      this.requestParameters.pagesize = currentSize
      this.getList()
    },
    // 获取数据
    async getList() {
      const { data } = await lists(this.requestParameters)
      console.log(data)
      this.res = data
      this.total = data.counts
      this.tagList = data.items
    },
    // 搜索
    async seek() {
      await lists(this.tagName)
      this.getList()
    },
    // 清除
    clean() {
      this.requestParameters.tagName = ''
      this.getList()
    },
    // 启用禁用状态
    async editState(value) {
      await changeState({
        id: value.id,
        state: value.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      value.state = value.state === 1 ? 0 : 1
      this.getList()
    },
    // 删除
    removeUser(id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await remove({ id })
            this.$message.success('删除成功！')
            this.getList()
          } catch (e) {
            this.$message.error('删除失败！')
          }
        })
        .catch(() => {})
    },
    // 修改标签
    handleChange(row) {
      this.TagData = row
      this.$nextTick(() => {
        this.$refs.TagsAdd.openDialog()
      })
    },

    // 新增用户
    adduser(row) {
      // 新增传的是一个 {}
      this.TagData = row
      this.$nextTick(() => {
        this.$refs.TagsAdd.openDialog()
      })
    },
    // 接收子组件的方法
    finish() {
      // 只有新增的时候，需要回到第一页
      if (!this.TagData.id) this.requestParameters.page = 1
      this.getList()
    },
    // 如果是从学科过来的，就有返回学科按钮
    getBackSubject() {
      this.$router.push({ path: '/list', name: 'subjects-list' })
    }
  }
}
</script>
<style lang="less" scoped>
.tags-container {
  padding: 0 10px;
  margin: 10px 0;
}
.filter-container {
  float: left;
}
.right {
  float: right;
}
// .green {
//   color: #67c23a;
// }
</style>
